<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例列表</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
</head>

<body>
    <div class="web">
        <div class="pencil animate__animated animate__shakeY"><img src="../img/casepencil.png"></div>
        <div class="hand animate__animated animate__shakeY"><img src="../img/casehand.png"> </div>
        <header>
            <span><img src="../img/logo.png" class="animate__animated animate__heartBeat"></span>
            <nav>
                <ul>
                    <li>
                        <a href="./index.html">首页
                        <p>home</p>
                    </a>
                    </li>
                    <li>
                        <a href="./list.html">游戏
                        <p>game</p>
                    </a>
                    </li>
                    <li>
                        <a href="./case.html">案例
                        <p>Case</p>
                    </a>
                    </li>
                    <li>
                        <a href="./person.html">关于我们
                        <p>About us</p>
                    </a>
                    </li>
                    <span><img src="../img/pagewechat.png"></span>
                </ul>

            </nav>
        </header>
        <main>
            <div class="first wow animate__fadeInLeftBig">
                <span><img src="../img/bgcase.png"></span>
            </div>
            <div class="sort wow animate__fadeInRightBig">
                <a href="">
                    <div class="rank">
                        排序
                    </div>
                </a>
                <a href="">
                    <div class="rank"> 按时间</div>
                </a>
                <a href="">
                    <div class="rank">按销量</div>
                </a>
                <a href="">
                    <div class="rank">按种类</div>
                </a>
            </div>
            <div class="turn">

                <div class="bottom">
                    <div class="bigBox">
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4>剑圣传奇</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame1_11.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4>PLAGUE LNC</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                    ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame2_11.jpg"></div>
                        </div>


                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4> 地狱边境</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame3_11.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4>功夫西游</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame4_11.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4>宝石迷阵</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                    ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/case5_05.jpg"></div>
                        </div>


                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4> 植物大战僵尸</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/pagegame6_11.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4> 狂斩三国</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/case7_16.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4> 世界迷雾</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/case8_17.jpg"></div>
                        </div>
                        <div class="smallBox">
                            <div class="shang">
                                <div class="left">
                                    <h4> 消灭星星游戏</h4>
                                    <p>2014-07-09</p>
                                    <p>使用次数:20</p>
                                    <p>____</p>
                                </div>
                                <div class="right">
                                    <div class="buy">
                                        <a href="">购买</a>

                                    </div>
                                    <i class="iconfont .icon-wujiaoxing
                                        ">&#xe608;</i>
                                </div>
                            </div>
                            <div class="xia"><img src="../img/case9_20.jpg"></div>
                        </div>

                    </div>
                </div>
                <div class="di">
                    <div class="left">&lt;</div>
                    <div class="zhong">
                        <ul>
                            <li><a href=""> 1</a></li>
                            <li><a href=""> 2</a></li>
                            <li><a href=""> 3</a></li>
                            <li><a href=""> 4</a></li>
                            <li><a href=""> 5</a></li>
                            <li><a href=""> 6</a></li>
                            <li><a href=""> ……</a></li>
                            <li><a href=""> 12</a></li>
                        </ul>
                    </div>
                    <div class="right">&gt;</div>
                </div>
        </main>
        <footer>
            <div class="foot">
                <div class="left">
                    <img src="../img/footleft1.png">
                </div>
                <div class="zhong">
                    <p>COPYRIGHT © 2014 PANGTANG. ALL RIGHTS RESERVED. 版权所有</p>
                </div>
                <div class="right "> <img src="../img/footright1.png"></div>
            </div>
        </footer>
        </div>
</body>

</html>